<PUBLIC:ATTACH EVENT="onmousedown" ONEVENT="engage()" />
<PUBLIC:ATTACH EVENT="onmousemove" ONEVENT="dragIt()" />
<PUBLIC:ATTACH EVENT="onmouseup"   ONEVENT="release()" />
<PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="setCursor()" />
<PUBLIC:ATTACH EVENT="onmouseout"  ONEVENT="release();restoreCursor()" />

<SCRIPT LANGUAGE="JScript">
// global declarations
var offsetX = 0
var offsetY = 0
var selectedObj
var oldZ, oldCursor

// initialize drag action on mousedown
function engage() {
	selectedObj = (element == event.srcElement) ? element : null
	if (selectedObj) {
		offsetX = event.offsetX - element.document.body.scrollLeft
		offsetY = event.offsetY - element.document.body.scrollTop
		oldZ = element.runtimeStyle.zIndex
		element.style.zIndex = 10000
		event.returnValue = false
	}
}

// move element on mousemove
function dragIt() {
	if (selectedObj) {
		selectedObj.style.pixelLeft = event.clientX - offsetX
		selectedObj.style.pixelTop = event.clientY - offsetY
		event.cancelBubble = true
		event.returnValue = false
	}
}

// restore state on mouseup
function release() {
	if (selectedObj) {
		selectedObj.style.zIndex = oldZ
	}
	selectedObj = null
}

// make cursor look draggable on mouseover
function setCursor() {
	oldCursor = element.runtimeStyle.cursor
	element.style.cursor = "hand"
}

// restore cursor on mouseout
function restoreCursor() {
	element.style.cursor = oldCursor
}
</SCRIPT>
